<template>
    <el-row>
        <el-col :span="8">
            <el-form :model="userForm" ref="userForm" label-width="100px" label-position="left">

                <el-form-item label="账户名称" prop="AccountName"
                    :rules="[
                       {required: true, message: '请输入账户名称！', trigger: 'blur' }
                    ]">
                    <el-input v-model="userForm.AccountName"></el-input>
                </el-form-item>

                <el-form-item label="应用系统" prop="AppName"
                    :rules="[
                       {required: true, message: '请输入应用系统！', trigger: 'blur' }
                    ]">
                    <el-input v-model="userForm.AppName"></el-input>
                </el-form-item>

                <el-form-item class="text-right">
                    <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
                    <router-link class="mb10 el-button el-button--danger" :to="{path:'/user'}">取消</router-link>
                </el-form-item>

            </el-form>
        </el-col>
    </el-row>
</template>
<style lang="less" scoped>

</style>
<script>
    import patterns from '../../util/patterns'
    import { mapActions } from 'vuex'
    import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
    export default{
        data(){
            return{
                userForm: {
                    Id: 0,
                    AccountName:'',
                    AppName:'',
                }
            }
        },
        components:{
          ElFormItem
        },
        computed: {

        },
        created () {
        	  if (this.isModify()) this.getView();
        },
        methods: {
            ...mapActions(['setLoadingText']),
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.setLoadingText('正在提交...');
                        this.$http.post('/user/save',{obj:JSON.stringify(this.userForm)})
                        .then(res => {
                            var msg = res.body;
                            if(msg.Success){
                                this.$message.success({message: this.isModify ? '更新成功' :'添加成功!' });
                                this.$router.replace('/user/list')
                            }else{
                                this.$message.error({message: this.isModify ? '更新失败': '添加失败!' });
                            }
                        },res => {
                             this.$message.error({message: this.isModify ? '更新失败' : '添加失败!' });
                        })
                    } else {
                        return false;
                    }
                });
            },
            getView () {
                this.$http.get('/user/get',{params: {id: this.$route.params.id}})
                .then(res => {
                    const msg = res.body;
                    if(msg.Success){
                        this.userForm= msg.Data;
                        delete this.userForm.Qrcode
                        delete this.userForm.Secret
                    }else{
                        this.$message.error({message: '获取用户信息失败!' });
                    }
                },res => {
                	  this.$message.error({message: '获取用户信息失败!' });
                })
            },
            isModify () {
                return this.$route.params.id;
            }
        }
    }
</script>
